<template>
  <div class="employee">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="table">
      <table>
        <thead>
          <tr style="color: #0beaf2">
            <th class="rank">排名</th>
            <th class="name">人员名称</th>
            <th class="count">次数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in sortedChartData" :key="index">
            <td class="rank">
              <div class="icon" :style="setColor(index)">{{ index + 1 }}</div>
            </td>
            <td class="name">{{ item.Name }}</td>
            <td class="count">{{ item.Count }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import lRTitle from "./lRTitle.vue";
import { connrequest } from "@/api/firstPage";

export default {
  name: "employeeRank",
  props: {},
  data() {
    return {
      statusTitle: "员工人工智能使用排名",
      chartData: []
    };
  },
  computed: {
    sortedChartData() {
      return [...this.chartData].sort((a, b) => b.count - a.count);
    }
  },
  components: {
    lRTitle
  },
  mounted() {
    this.getChatGPTLogSumGroupByName();
  },
  methods: {
    setColor(num) {
      const colors = [
        "red", //第一名
        "orange", //第二名
        "#c5a70c" //第三名
      ];
      const otherColor = "#038abf";
      const backgroundColor = num < 3 ? colors[num] : otherColor;

      return {
        "background-color": backgroundColor
      };
    },
    async getChatGPTLogSumGroupByName() {
      const res = await connrequest("GetChatGPTLogSumGroupByName");
      if (res.Status.StatusCode === 0) {
        this.chartData = res.Data;
      }
    }
  }
};
</script>

<style scoped>
.employee {
  position: relative;
  height: 28%; /* 使用视口高度单位，或根据需要调整 */
}

.table {
  position: absolute;
  overflow: auto;
  top: 18%;
  bottom: 5%;
  left: 5%;
  right: 4%;
}

table {
  height: 100%;
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #053557;
}

tbody {
  background-color: #07253e;
  color: white;
  font-family: Arial, sans-serif;
}

th,
td {
  padding: 6px;
  text-align: left;
  border-bottom: 3px solid #061f35;
}

th {
  background-color: #053557;
}

tr:hover {
  background-color: #07253e;
}

.rank {
  text-align: center;
  text-align: center;
  width: 50px;
}

.name {
  width: 200px;
  text-align: center;
  white-space: nowrap; /* 防止名称换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.count {
  width: 100px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
  text-align: center;
  line-height: 20px;
  color: white;
  font-weight: bold;
}
</style>
